<template>
  <div class="reapirmanfollow">
      <div class="headCrm-reapirman-follow mlcbg">
        <p class="billHead-follow">
          <span class="el-icon-arrow-left" @click="returnPage"></span>
          <span class="headFont">写跟进</span>
          <button class="submit-follow" @click="submitFollow">提交</button>
        </p>          
      </div>

      <div class="contentCrm-reapirman-follow">
        <el-form :model="followList"  ref="followList" class="demo-followList">
          <ul class="text-list">
              <li>
                  <span>类型</span>
                  <select class="selectScheme" v-model="selected" name="fruit" @change="getSelected(selected)">
                      <option value="">请选择</option>
                        <option :value="item.id" v-for="(item,index) in followList.type" :key="index"
                        class="optiontext">{{item.name}}
                        </option>
                  </select>
              </li>
              <li class="text-text">
                <el-form-item label="" prop="desc" label-width='0rem'>
                    <el-input type="textarea" v-model="followList.desc" id="input-text" placeholder="请输入文字"></el-input>
                </el-form-item>
              </li>                
              <li>
                  <span>挂起</span>
                  <el-form-item label="" prop="deliverya" class="but-switcha">
                    <el-switch v-model="followList.deliverya"></el-switch>
                  </el-form-item>
              </li>   

              <li>
                  <span>返客</span>
                  <el-form-item label="" prop="deliveryb" class="but-switchb">
                    <el-switch v-model="followList.deliveryb"></el-switch>
                  </el-form-item>
              </li>                         
          </ul>
            <div class="pictureFollow">
                <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </div>
        </el-form>
      </div>

      <div class="footCrm-reapirman">
      </div>
  </div>
</template>

<script>
    //import Footer from '../components/Footer.vue';//引入组件
    export default {
        name: 'repairmanfollow',
            // components: {delivery
            //     Footer
            // },
        data() {
            return {
                followList:{
                    type:[
                        // {text:'待维修'},
                        // {text:'待配件'},
                        // {text:'待技术'},
                        // {text:'待付款'},
                    ],
                    deliverya:false,
                    deliveryb: false,
                    desc: '',

                },
                selected: '',
                dialogVisible: false,
                dialogImageUrl: '',
            }
        },
        mounted: function(){
            //获取工单处理状态档案
            this.getDocument('base_orderfixstatus',this.followList.type);
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                console.log(file);
                console.log(file.url);
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            returnPage:function(){
                this.$router.push({
                    path:'/repairmanDetail'
                })           
            },
            submitFollow:function(){
                let _this = this;
                let paramfetch = {
                    "orderId":localStorage.getItem("detailId"),
                    "fixstatusId":this.selected,
                    "remark":this.followList.desc,
                    "isHangup":this.followList.deliverya ? 1 : 0,
                    "isReturn":this.followList.deliveryb ? 1 : 0,
                    "orderPhoto":[]
                }
                console.log(paramfetch)
                this.$post(this.$root.domainIp+'maintain/apporder/followup',{param:this.encrypt(JSON.stringify(paramfetch))})
                .then((response) => {
                    if(response.code == 0){
                        _this.$router.push({
                            path:'/repairman'
                        }) 
                    }else {
                        _this.$message({
                            message:(response.message || '请检查网络是否连接'),
                            center: true
                        });
                    }
                }).catch(function (error) {
                    console.log(error);
                    _this.$message({
                        message:('请检查网络是否连接!'),
                        center: true
                    });
                });         
            },
        },
    }
</script>

<style>
/* headCrm */
  .headCrm-reapirman-follow{
        width:100%;
  }
  .billHead-follow{
    text-align:center;
    font-size: 0.33rem;
    color:#fff;  
    padding:0.33rem 0; 
    clear: none; 
  }
  .reapirmanfollow .el-icon-arrow-left{
      position:absolute;
      left: 0.3rem;
      top:0.2rem;
      font-size: 0.6rem;
  }
  .reapirmanfollow .submit-follow{
      width: 1rem;
      position:absolute;
      right: 0.3rem;
      top:0.25rem;
      background-color: #ff5000;
      line-height:0.5rem;
      text-align:center;
      color:#fff;
      border: 0.01rem solid #ffffff;
      border-radius:0.33rem;
      box-shadow:0.05rem 0.05rem 0.1rem #646464;
  }

/* contentCrm-reapirman-follow */
  .contentCrm-reapirman-follow{
    width: 90%;
    margin-left: 5%;
    color: #646464;
  }
  .reapirmanfollow .text-list li{
    margin-top: 0.55rem;
    font-size: 0.33rem;
    /* height: 2rem; */
  }
  .reapirmanfollow .el-form-item{
      margin: 0;
  }
  .reapirmanfollow .but-switcha{
    height: 0.3rem;
    float: right;
  }
  .reapirmanfollow .el-form-item{
    height: 0.33rem;
    margin:0rem;
  }
  .reapirmanfollow .el-form-item__content{
    line-height:0.33rem;
    font-size:0.33rem;
    /* display:inline-block; */
  }
  .reapirmanfollow .but-switchb{
    height: 0.3rem;
    float: right;
  }
  .reapirmanfollow .el-textarea__inner{
      line-height:0.55rem;
  }
  .el-form-item__content{
      /* height: 2rem; */
  }
  .text-text{
      height: 1.2rem;
  }
  .reapirmanfollow .selectScheme{
    border:none;
    float: right;
    font-size:0.33rem;
    color: #646464;
  }
  .reapirmanfollow .selectScheme option{
    font-size:0.25rem;
  }

/* 图片 */
.pictureFollow{
    margin-top: 0.6rem;
}
.pictureFollow .el-upload--picture-card{
    width: 2.09rem;
    line-height:2.5rem;
    height: 2.09rem;
    text-align: center;
    color: #ff5000;
}
.pictureFollow .el-upload--picture-card i{
    color: #ff5000;
    font-size: 0.8rem;
}
.pictureFollow .el-upload-list--picture-card .el-upload-list__item{
    width: 2.09rem;
    height: 2.09rem;
}
</style>
